<template>
  <div class="dashboard-container">
    <div class="card" v-if="this.$store.state.user.role !== 'camille'">
      <el-card>
        <!-- 我的信息 -->
        <el-row :gutter="12" v-if="this.$store.state.user.role == 'other'">
          <!-- pc -->
          <el-card v-if="this.pc">
            <p>
              今日{{ ftimes }} 登录账号：{{ this.username }}
              <span v-if="this.$store.state.user.role == 'other'"
                >尊敬的客户</span
              >
              {{ getTimeState() }} 欢迎您回到数据中心。
            </p>
            <el-col :span="8">
              <el-card shadow="hover">
                <div class="user">
                  <i style="color: gold" class="el-icon-s-finance usericon"></i>
                  <div class="username">
                    <span> 账户余额</span>
                    <span class="numm">
                      {{ userInfo.balance | currency("￥") }}
                    </span>
                  </div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="8">
              <el-card shadow="hover">
                <div class="user">
                  <i style="color: red" class="el-icon-star-on usericon"></i>
                  <div class="username">
                    <span> 透支额度</span>
                    <span class="numm">
                      {{ userInfo.quota | currency("￥") }}
                    </span>
                  </div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="8">
              <el-card shadow="hover">
                <div class="user">
                  <i
                    style="color: #cd5c5c"
                    class="el-icon-s-goods usericon"
                  ></i>
                  <div class="username">
                    <span>月消费</span>
                    <span class="numm">￥{{ sameMonth.successConsume }}</span>
                  </div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="8">
              <el-card shadow="hover">
                <div class="user">
                  <i
                    style="color: #67c23a"
                    class="el-icon-success usericon"
                  ></i>
                  <div class="username">
                    <span> 成功量</span>
                    <span class="numm"> {{ sameMonth.successCount }} </span>
                  </div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="8">
              <el-card shadow="hover">
                <div class="user">
                  <i style="color: #cd5c5c" class="el-icon-error usericon"></i>
                  <div class="username">
                    <span> 失败量</span>
                    <span class="numm"> {{ sameMonth.errorCount }} </span>
                  </div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="8">
              <el-card shadow="hover">
                <div class="user">
                  <i
                    style="color: #409eff"
                    class="el-icon-s-order usericon"
                  ></i>
                  <div class="username">
                    <span> 总订单</span>
                    <span class="numm"> {{ sameMonth.allCount }} </span>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-card>
          <!-- mobile -->
          <el-card v-if="this.mobile" style="text-align: center">
            <p>
              今日{{ ftimes }}
              <br />
              登录账号：{{ this.username }}
              <span v-if="this.$store.state.user.role == 'admin'">管理员</span>
              {{ getTimeState() }}
              <br />
            </p>
            <el-card shadow="none" style="width: 33%; display: inline-block">
              <span style="color: #666"> 月销(折)</span>
              <hr color="#e4e5e6" />
              <span class="numm">
                {{ sameMonth.successConsume }}
              </span>
            </el-card>
            <el-card shadow="none" style="width: 33%; display: inline-block">
              <span style="color: #666"> 账户余额</span>
              <hr color="#e4e5e6" />
              <span class="numm">
                {{ userInfo.balance }}
              </span>
            </el-card>
            <el-card shadow="none" style="width: 33%; display: inline-block">
              <span style="color: #666"> 账户额度</span>
              <hr color="#e4e5e6" />
              <span class="numm">
                {{ userInfo.quota }}
              </span>
            </el-card>
            <el-card shadow="none" style="width: 33%; display: inline-block">
              <span style="color: #666"> 月成功</span>
              <hr color="#e4e5e6" />
              <span class="numm"> {{ sameMonth.successCount }} </span>
            </el-card>
            <el-card shadow="none" style="width: 33%; display: inline-block">
              <span style="color: #666"> 月失败</span>
              <hr color="#e4e5e6" />
              <span class="numm"> {{ sameMonth.errorCount }} </span>
            </el-card>
            <el-card shadow="none" style="width: 33%; display: inline-block">
              <span style="color: #666"> 月订单</span>
              <hr color="#e4e5e6" />
              <span class="numm"> {{ sameMonth.allCount }} </span>
            </el-card>
          </el-card>
        </el-row>
        <el-row :gutter="12" v-if="this.$store.state.user.role == 'admin'">
          <!-- pc -->
          <el-card v-if="this.pc" shadow="none">
            <p>
              今日{{ ftimes }} 登录账号：{{ this.username }}
              <span v-if="this.$store.state.user.role == 'admin'">管理员</span>
              {{ getTimeState() }} 欢迎您回到数据中心。对新版有想说的，请
              <span @click="feedback()" style="color: #409eff">点击反馈</span>
            </p>
            <el-col :span="5">
              <el-card shadow="hover">
                <div class="user">
                  <i
                    style="color: #67c23a"
                    class="el-icon-success usericon"
                  ></i>
                  <div class="username">
                    <span> 成功量</span>
                    <span class="numm"> {{ sameMonth.successCount }} </span>
                  </div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="5">
              <el-card shadow="hover">
                <div class="user">
                  <i style="color: #cd5c5c" class="el-icon-error usericon"></i>
                  <div class="username">
                    <span> 失败量</span>
                    <span class="numm"> {{ sameMonth.errorCount }} </span>
                  </div>
                </div>
              </el-card>
            </el-col>

            <el-col :span="5">
              <el-card shadow="hover">
                <div class="user">
                  <i
                    style="color: #409eff"
                    class="el-icon-s-order usericon"
                  ></i>
                  <div class="username">
                    <span> 总订单</span>
                    <span class="numm"> {{ sameMonth.allCount }} </span>
                  </div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="5">
              <el-card shadow="hover">
                <div class="user">
                  <i style="color: gold" class="el-icon-s-finance usericon"></i>
                  <div class="username">
                    <span> 月销(全)</span>
                    <span class="numm">
                      {{ sameMonth.consume | currency("￥") }}
                    </span>
                  </div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="4">
              <el-card shadow="hover">
                <div class="user">
                  <i
                    style="color: #ffa335"
                    class="el-icon-s-finance usericon"
                  ></i>
                  <div class="username">
                    <span> 月销(折)</span>
                    <span class="numm">
                      {{ sameMonth.successConsume | currency("￥") }}
                    </span>
                  </div>
                </div>
              </el-card>
            </el-col>
            <br />
            <br />
            <br />
            <br />
          </el-card>
          <!-- mobile -->
          <el-card v-if="this.mobile" style="text-align: center">
            <p>
              今日{{ ftimes }}
              <br />
              登录账号：{{ this.username }}
              <span v-if="this.$store.state.user.role == 'admin'">管理员</span>
              {{ getTimeState() }}
              <br />
            </p>
            <el-card shadow="none" style="width: 33%; display: inline-block">
              <span style="color: #666"> 月成功</span>
              <hr color="#e4e5e6" />
              <span class="numm"> {{ sameMonth.successCount }} </span>
            </el-card>
            <el-card shadow="none" style="width: 33%; display: inline-block">
              <span style="color: #666"> 月失败</span>
              <hr color="#e4e5e6" />
              <span class="numm"> {{ sameMonth.errorCount }} </span>
            </el-card>
            <el-card shadow="none" style="width: 33%; display: inline-block">
              <span style="color: #666"> 月订单</span>
              <hr color="#e4e5e6" />
              <span class="numm"> {{ sameMonth.allCount }} </span>
            </el-card>
            <el-card shadow="none" style="width: 50%; display: inline-block">
              <span style="color: #666"> 月销量(全价)</span>
              <hr color="#e4e5e6" />
              <span class="numm">
                <!-- {{ sameMonth.consume | currency("￥") }} -->
                ￥{{ sameMonth.consume }}
              </span>
            </el-card>
            <el-card shadow="none" style="width: 50%; display: inline-block">
              <span style="color: #666"> 月销量(折)</span>
              <hr color="#e4e5e6" />
              <span class="numm"> ￥{{ sameMonth.successConsume }} </span>
            </el-card>
          </el-card>
        </el-row>
        <el-row :gutter="12" v-if="this.$store.state.user.role == 'boss'">
          <p>
            今日{{ ftimes }}
            <span v-if="this.$store.state.user.role == 'boss'">老板Boss</span>
            {{ getTimeState() }} 欢迎您回到数据中心
          </p>
          <!-- pc -->
          <el-card shadow="none" v-if="this.pc">
            <el-col :span="6">
              <el-card shadow="hover">
                <div class="user">
                  <i
                    style="color: #67c23a"
                    class="el-icon-success usericon"
                  ></i>
                  <div class="username">
                    <span> 成功量</span>
                    <span class="numm"> {{ sameMonth.successCount }} </span>
                  </div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card shadow="hover">
                <div class="user">
                  <i style="color: #cd5c5c" class="el-icon-error usericon"></i>
                  <div class="username">
                    <span> 失败量</span>
                    <span class="numm"> {{ sameMonth.errorCount }} </span>
                  </div>
                </div>
              </el-card>
            </el-col>

            <el-col :span="6">
              <el-card shadow="hover">
                <div class="user">
                  <i
                    style="color: #409eff"
                    class="el-icon-s-order usericon"
                  ></i>
                  <div class="username">
                    <span> 总单量</span>
                    <span class="numm"> {{ sameMonth.allCount }} </span>
                  </div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card shadow="hover">
                <div class="user">
                  <i style="color: gold" class="el-icon-s-finance usericon"></i>
                  <div class="username">
                    <span> 月销(全)</span>
                    <span class="numm">
                      {{ sameMonth.consume | currency("￥") }}
                    </span>
                  </div>
                </div>
              </el-card>
            </el-col>
            <br /><br />
            <br />
            <br />
          </el-card>
          <!-- mobile -->
          <el-card shadow="none" style="text-align: center" v-if="this.mobile">
            <el-card shadow="none" style="width: 50%; display: inline-block">
              <span style="color: #666"> 月成功</span>
              <hr color="#e4e5e6" />
              <span class="numm"> {{ sameMonth.successCount }} </span>
            </el-card>
            <el-card shadow="none" style="width: 50%; display: inline-block">
              <span style="color: #666"> 月失败</span>
              <hr color="#e4e5e6" />
              <span class="numm"> {{ sameMonth.errorCount }} </span>
            </el-card>
            <el-card shadow="none" style="width: 50%; display: inline-block">
              <span style="color: #666"> 月订单</span>
              <hr color="#e4e5e6" />
              <span class="numm"> {{ sameMonth.allCount }} </span>
            </el-card>
            <el-card shadow="none" style="width: 50%; display: inline-block">
              <span style="color: #666"> 月销(全)</span>
              <hr color="#e4e5e6" />
              <span class="numm"> ￥{{ sameMonth.consume }} </span>
            </el-card>
          </el-card>
        </el-row>
      </el-card>
    </div>
    <div id="api" v-if="this.$store.state.user.role == 'camille'">
      <!-- 卡密信息 -->
      <Addorder></Addorder>
    </div>
  </div>
</template>

<script>
// import { mapGetters } from "vuex";
import { balance, consume, consumes } from "@/api/order";
import addorder from "./components/addorder";
// 引入防抖函数
var myChart;
import debounce from "lodash.debounce";
export default {
  components: {
    Addorder: addorder,
  },
  name: "Dashboard",
  data() {
    return {
      mobile: false,
      pc: false,
      // 宽高
      screenWidth: "",
      screenHeight: "",
      // 时间
      ftimes: [],
      // 总数据
      alldata: [],
      // 用户信息
      userInfo: {},
      // echarts数据
      consumeData: [],
      // 当月数据
      sameMonth: {},
      createTime: [],
      errorCount: [],
      consume: [],
      successConsume: [],
      successCount: [],
      allCount: [],
      // 按钮颜色
      activeNum: 3,
      myChart: null, //定义全局变量
      options: [
        {
          value: "1",
          label: "全部流量",
        },
        {
          value: "2",
          label: "四川流量",
        },
        {
          value: "3",
          label: "湖南流量",
        },
      ],
      arevalue: "1",
    };
  },
  async created() {
    // 日期显示
    let ftime = new Date();
    let ty = ftime.getFullYear();
    let tm = ftime.getMonth() + 1;
    let td = ftime.getDate();
    let tw = ftime.getDay();
    let ftimes = `${ty}年${tm}月${td}日-周${tw}`;
    // console.log(ftimes);
    this.ftimes = ftimes;
    let data = {
      scope: this.arevalue,
      //scope: "湖南",
    };
    let username = window.localStorage.getItem("username");
    this.username = username;
    // 获取用户信息
    this.getbalance(username);
    // 消费金额
    // let res = await consumes(data);
    // this.sameMonth = res.top[0];
    // this.alldata = res.count;
    // this.consumeData = res.count.slice(0, this.activeNum);
    //console.log("888", this.consumeData);
    //console.log("查询", res);
    var time = [];
    var successCount = [];
    var errorCount = [];
    var successConsume = [];
    var consume = [];
    var allCount = [];
    for (let item of res.count.slice(0, this.activeNum)) {
      //打印的item为数组中的每一个对象
      //console.log(item); //{A:1,B:2,C:3},{D:4,E:5,F:6}
      for (let key in item) {
        //遍历数组中的对象
        //console.log(key, item);
      }
      time.unshift(item.createTime.slice(5, 10));
      successCount.unshift(item.successCount);
      errorCount.unshift(item.errorCount);
      allCount.unshift(item.allCount);
      successConsume.unshift(item.successConsume);
      consume.unshift(item.consume);
    } // 日期：
    this.createTime = time;
    this.successCount = successCount;
    this.errorCount = errorCount;
    this.allCount = allCount;
    this.successConsume = successConsume;
    if (this.$store.state.user.role !== "other") {
      this.consume = consume;
    }
    this.initMonthWorkOrder();
    this.initMonthWorkOrders();
  },
  mounted() {
    this.screenWidth = document.body.clientWidth;
    this.screenHeight = document.body.clientHeight;
    window.onresize = () => {
      return (() => {
        this.screenWidth = document.body.clientWidth;
        this.screenHeight = document.body.clientHeight;
      })();
    };
  },
  watch: {
    screenWidth: {
      handler: function (newValue, oldValue) {
        if (newValue >= 1000) {
          this.pc = true;
          this.mobile = false;
        } else {
          this.pc = false;
          this.mobile = true;
        }
      },
    },
  },
  methods: {
    // 点击反馈
    feedback() {
      this.$router.push("/ticketsManage/index");
    },
    // async selectChanged(value) {
    //   // console.log(value);
    //   this.arevalue = value;
    //   let res = await consumes({ scope: this.arevalue });
    //   this.sameMonth = res.top[0];
    //   this.consumeData = res.count;
    //   var time = [];
    //   var successCount = [];
    //   var errorCount = [];
    //   var consume = [];
    //   var successConsume = [];
    //   var allCount = [];
    //   for (let item of res.count) {
    //     //打印的item为数组中的每一个对象
    //     // console.log(item); //{A:1,B:2,C:3},{D:4,E:5,F:6}
    //     for (let key in item) {
    //       //遍历数组中的对象
    //       // console.log(key, item);
    //     }
    //     time.unshift(item.createTime.slice(5, 10));
    //     successCount.unshift(item.successCount);
    //     errorCount.unshift(item.errorCount);
    //     allCount.unshift(item.allCount);
    //     successConsume.unshift(item.successConsume);
    //     consume.unshift(item.consume);
    //   } // 日期：
    //   this.createTime = time;
    //   this.successCount = successCount;
    //   this.errorCount = errorCount;
    //   this.allCount = allCount;
    //   this.successConsume = successConsume;
    //   if (this.$store.state.user.role !== "other") {
    //     this.consume = consume;
    //   }
    //   // console.log("11111", this.createTime);
    //   this.initMonthWorkOrder();
    //   this.initMonthWorkOrders();
    // },
    // 余额数据
    async getbalance(username) {
      let res = await balance(username);
      this.userInfo = res.data;
    },
    // 消费金额
    // async getconsume(day) {
    //   let res = await consumes({ scope: this.arevalue });
    //   this.alldata = res.count;
    //   this.consumeData = res.count.slice(0, this.activeNum);
    //   // //console.log("查询", res.data);
    //   var time = [];
    //   var successCount = [];
    //   var errorCount = [];
    //   var successConsume = [];
    //   var consume = [];

    //   var allCount = [];
    //   for (let item of this.consumeData) {
    //     //打印的item为数组中的每一个对象
    //     // //console.log(item); //{A:1,B:2,C:3},{D:4,E:5,F:6}
    //     for (let key in item) {
    //       //遍历数组中的对象
    //       // //console.log(key, item);
    //     }
    //     time.unshift(item.createTime.slice(5, 10));
    //     successCount.unshift(item.successCount);
    //     errorCount.unshift(item.errorCount);
    //     allCount.unshift(item.allCount);
    //     successConsume.unshift(item.successConsume);
    //     consume.unshift(item.consume);
    //   } // 日期：
    //   this.createTime = time;
    //   this.successCount = successCount;
    //   this.errorCount = errorCount;
    //   this.allCount = allCount;
    //   this.successConsume = successConsume;
    //   if (this.$store.state.user.role !== "other") {
    //     this.consume = consume;
    //   }
    //   // //console.log("11111", this.createTime);
    //   this.initMonthWorkOrder();
    //   this.initMonthWorkOrders();

    //   this.sameMonth = res.top[0];
    // },
    // 查询消费金额
    searchConsume: debounce(function (day) {
      this.activeNum = day;
      this.getconsume(this.activeNum);
    }, 500), // 图表数据
    // echarts折线图
    initMonthWorkOrder() {
      if (
        //判断是否存在echarts实例化对象,如果存在则销毁
        this.myChart != null &&
        this.myChart != "" &&
        this.myChart != undefined
      ) {
        this.myChart.dispose();
      }

      let myChart = this.$echarts.init(this.$refs.monthWorkOrder);

      if (this.$store.state.user.role == "boss") {
        var options = {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
              label: {
                backgroundColor: "#6a7985",
              },
            },
          },
          title: {
            subtext: "日订单趋势",
          },
          legend: {
            data: ["成功订单", "失败订单", "消费金额*(全)", "总订单"],
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          // toolbox: {
          //     show: true,
          //     feature: {
          //         dataZoom: {
          //             yAxisIndex: "none",
          //         },
          //         dataView: { readOnly: false },
          //         // magicType: { type: ["line", "bar"] },
          //         saveAsImage: {},
          //     },
          // },
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: this.createTime,
          },
          yAxis: {
            type: "value",
            alignTicks: true, // show :false,
          },
          series: [
            {
              name: "成功订单",
              type: "line", // stack: "Total",
              color: "#67c23a",
              data: this.successCount,
              label: {
                show: true,
                position: "right",
              },
            },
            {
              name: "失败订单",
              type: "line", // stack: "Total",
              color: "#B80000",
              data: this.errorCount,
              label: {
                show: true,
                position: "left",
              },
            },
            {
              name: "总订单",
              type: "line", // stack: "Total",
              color: "#409eff",
              data: this.allCount, // 显示数据
              label: {
                show: true,
                position: "top",
              },
            },

            {
              name: "消费金额*(全)",
              type: "line",
              color: "gold", // stack: "Total",
              data: this.consume,
              label: {
                show: true,
                position: "bottom",
              },
            },
          ],
        }; // 初始化
      }
      if (this.$store.state.user.role == "admin") {
        var options = {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
              label: {
                backgroundColor: "#6a7985",
              },
            },
          },
          title: {
            subtext: "日订单趋势",
          },
          legend: {
            data: [
              "成功订单",
              "失败订单",
              "消费金额*(全)",
              "总订单",
              "消费金额*(折)",
            ],
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },

          xAxis: {
            type: "category",
            boundaryGap: false,
            data: this.createTime,
          },
          yAxis: {
            type: "value",
            alignTicks: true, // show :false,
          },
          series: [
            {
              name: "成功订单",
              type: "line", // stack: "Total",
              color: "#67c23a",
              data: this.successCount,
              label: {
                show: true,
                position: "right",
              },
            },
            {
              name: "失败订单",
              type: "line", // stack: "Total",
              color: "#B80000",
              data: this.errorCount,
              label: {
                show: true,
                position: "left",
              },
            },
            {
              name: "总订单",
              type: "line", // stack: "Total",
              color: "#409eff",
              data: this.allCount, // 显示数据
              label: {
                show: true,
                position: "top",
              },
            },

            {
              name: "消费金额*(全)",
              type: "line",
              color: "gold", // stack: "Total",
              data: this.consume,
              label: {
                show: true,
                position: "bottom",
              },
            },
            {
              name: "消费金额*(折)",
              type: "line",
              color: "#FF9933", // stack: "Total",
              data: this.successConsume,
              label: {
                show: true,
                position: "bottom",
              },
            },
          ],
        }; // 初始化
      }
      if (this.$store.state.user.role == "other") {
        var options = {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
              label: {
                backgroundColor: "#6a7985",
              },
            },
          },
          title: {
            subtext: "日订单趋势",
          },
          legend: {
            data: ["成功订单", "失败订单", "总订单", "消费金额*(折)"],
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          // toolbox: {
          //     show: true,
          //     feature: {
          //         // dataZoom: {
          //         //     yAxisIndex: "none",
          //         // },
          //         dataView: { readOnly: false },
          //         // magicType: { type: ["line", "bar"] },
          //         saveAsImage: {},
          //     },
          // },
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: this.createTime,
          },
          yAxis: {
            type: "value",
            alignTicks: true, // show :false,
          },
          series: [
            {
              name: "成功订单",
              type: "line", // stack: "Total",
              color: "#67c23a",
              data: this.successCount,
              label: {
                show: true,
                position: "right",
              },
            },
            {
              name: "失败订单",
              type: "line", // stack: "Total",
              color: "#B80000",
              data: this.errorCount,
              label: {
                show: true,
                position: "left",
              },
            },
            {
              name: "总订单",
              type: "line", // stack: "Total",
              color: "#409eff",
              data: this.allCount, // 显示数据
              label: {
                show: true,
                position: "top",
              },
            },

            {
              name: "消费金额*(折)",
              type: "line",
              color: "#FF9933", // stack: "Total",
              data: this.successConsume,
              label: {
                show: true,
                position: "bottom",
              },
            },
          ],
        }; // 初始化
      }
      myChart.setOption(options);
    },
    // echarts柱状图
    initMonthWorkOrders() {
      if (
        //判断是否存在echarts实例化对象,如果存在则销毁
        this.myChart != null &&
        this.myChart != "" &&
        this.myChart != undefined
      ) {
        this.myChart.dispose();
      }

      let myChart = this.$echarts.init(this.$refs.monthWorkOrders);

      if (this.$store.state.user.role == "boss") {
        var options = {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "line",
              label: {
                backgroundColor: "#6a7985",
              },
            },
          },
          title: {
            subtext: "日消费趋势",
          },
          xAxis: {
            type: "category",
            // boundaryGap: false,
            data: this.createTime,
          },
          yAxis: {
            type: "value",
            alignTicks: true, // show :false,
          },
          series: [
            {
              // showBackground: true,
              name: "消费金额(全)",
              barWidth: "20%",
              type: "bar",
              color: "gold", // stack: "Total",
              data: this.consume,
              label: {
                show: true,
                position: "top",
              },
            },
          ],
        }; // 初始化
      }
      if (this.$store.state.user.role == "admin") {
        var options = {
          tooltip: {
            axisPointer: {
              type: "bar",
              label: {
                backgroundColor: "#6a7985",
              },
            },
          },
          title: {
            subtext: "日消费趋势",
          },
          legend: {
            data: ["消费金额(全)", "消费金额(折)"],
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },

          xAxis: {
            type: "category",
            data: this.createTime,
          },
          yAxis: {
            type: "value",
            alignTicks: true, // show :false,
          },
          series: [
            {
              name: "消费金额(全)",
              barWidth: "20%",

              type: "bar",
              color: "gold", // stack: "Total",
              data: this.consume,
              label: {
                show: true,
                position: "top",
              },
            },
            {
              name: "消费金额(折)",
              barWidth: "20%",

              type: "bar",
              color: "#FF9933", // stack: "Total",
              data: this.successConsume,
              label: {
                show: true,
                position: "top",
              },
            },
          ],
        }; // 初始化
      }
      if (this.$store.state.user.role == "other") {
        var options = {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "line",
              label: {
                backgroundColor: "#6a7985",
              },
            },
          },
          title: {
            subtext: "日消费趋势",
          },
          xAxis: {
            type: "category",
            // boundaryGap: false,
            data: this.createTime,
          },
          yAxis: {
            type: "value",
            alignTicks: true, // show :false,
          },
          series: [
            {
              barWidth: "20%",
              name: "消费金额(折)",
              type: "bar",
              color: "#FF9933", // stack: "Total",
              data: this.successConsume,
              label: {
                show: true,
                position: "top",
              },
            },
          ],
        }; // 初始化
      }

      myChart.setOption(options);
    },
    //echarts
    // 时间判断
    getTimeState() {
      // 获取当前时间
      let timeNow = new Date();
      // 获取当前小时
      let hours = timeNow.getHours();
      // 设置默认文字
      let state = ``;
      // 判断当前时间段
      if (hours >= 0 && hours <= 10) {
        state = `早上好!`;
      } else if (hours > 10 && hours <= 14) {
        state = `中午好!`;
      } else if (hours > 14 && hours <= 18) {
        state = `下午好!`;
      } else if (hours > 18 && hours <= 24) {
        state = `晚上好!`;
      }
      return state;
    },
  },
};
</script>

<style lang="scss" scoped>
.numm {
  font-weight: 800;
  font-size: 20px;
}

.dashboard {
  &-container {
    font-family: serif;
    margin: 5px;
    font-size: 16px;

    .active {
      background-color: #409eff;
      color: white;
    }

    .user {
      text-align: center;
      // background-color: #666;
      font-size: 1rem;
      display: flex;
      height: 35px;
      padding-right: 4rem;
      // margin-right: 8rem;
      // line-height: 28px;
      justify-content: space-between;
      text-align: center;

      // align-content: center;
      .usericon {
        // color: #666;
        font-size: 35px;
      }

      .username {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
      }
    }
  }
}
</style>
<style lang="scss" scoped>
#api {
  .firstol {
    li {
      font-size: 14px;
      line-height: 20px;

      span {
        color: #777777;
      }
    }
  }

  .secondol {
    li {
      div {
        font-size: 20px;
        font-weight: bold;
      }

      p {
        color: #777777;
      }
    }
  }
}
</style>
